<template>
  <div class="main-content">
    <h2 style="margin-bottom:20px;">库存管理 - 库存查询</h2>
    <el-form :inline="true" :model="searchForm" class="form-content">
      <el-form-item label="物品名称">
        <el-input v-model="searchForm.name" placeholder="请输入物品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="goToRecord">入库/出库登记</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" style="width: 100%;margin-top:20px;" border>
      <el-table-column prop="name" label="物品名称" align="center" />
      <el-table-column prop="stock" label="库存数量" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
    </el-table>
    <el-pagination
      style="margin-top:20px;"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, jumper"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      :page-sizes="[10, 20, 50]"
      background
    />
  </div>
</template>
<script>
import { getStockList } from '@/utils/kucunLocal';
export default {
  data() {
    return {
      searchForm: { name: '' },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    getDataList() {
      let list = getStockList();
      if (this.searchForm.name) {
        list = list.filter(i => i.name.includes(this.searchForm.name));
      }
      this.totalPage = list.length;
      const start = (this.pageIndex-1)*this.pageSize;
      this.dataList = list.slice(start, start+this.pageSize);
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    goToRecord() {
      this.$router.push('/kucun/record');
    }
  }
}
</script>
